<template>
    <div class="home">
        <div class="advert">
            <div class="home-banner-wrap">
                <div class="home-banner">
                    <div class="home-banner-con">
                       <swiper ref="mySwiper" :options="swiperOptions1">
                            <swiper-slide><img src="../../img/组20.png" alt=""></swiper-slide>
                            <swiper-slide><img src="../../img/组20.png" alt=""></swiper-slide>
                            <swiper-slide><img src="../../img/组20.png" alt=""></swiper-slide>
                             <swiper-slide><img src="../../img/组20.png" alt=""></swiper-slide>
                            <swiper-slide><img src="../../img/组20.png" alt=""></swiper-slide>
                        </swiper>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-warp">
            <div class="home-introduce-con">
                <div class="home-introduce">
                    <img src="../../img/HTML.jpg" alt="" class="imges">
                    <img src="../../img/JAVA.jpg" alt="" class="imges">
                    <img src="../../img/Python.jpg" alt="" class="imges">
                    <img src="../../img/UIUE.jpg" alt="" class="imges">
                </div>
            </div>
        </div>
        <div class="home-trait-wrap">
            <div class="home-trait-con">
                <div class="gnen">
                    <p class="mish">
                        <i class="mish-i">
                            <img src="../../img/tubiao.jpg" alt="">
                        </i>
                        " “零”基础入学 "
                    </p>
                    <p class="mish-p">无需任何专业基础知识</p>
                    <span class="mish-f"></span>
                </div>
                <div class="gnen">
                     <p class="mish">
                        <i class="mish-i">
                            <img src="../../img/daik.jpg" alt="">
                        </i>
                        " 提供助学贷款 "
                    </p>
                    <p class="mish-p">免手续费贷款业务让您轻松入学</p>
                    <span class="mish-f"></span>
                </div>
                <div class="gnen">
                     <p class="mish">
                        <i class="mish-i">
                            <img src="../../img/shuj.jpg" alt="">
                        </i>
                        " 四大专业技能证书 "
                    </p>
                    <p class="mish-p">提供技能认证证书,助您驰骋职场</p>
                    <span class="mish-f"></span>
                </div>
                <div class="gnen">
                     <p class="mish">
                        <i class="mish-i">
                            <img src="../../img/zshu.jpg" alt="">
                        </i>
                        " 学信网可查学历 "
                    </p>
                    <p class="mish-p">提供社会认可的高等学历晋升通道</p>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="scene">
            <p class="scene-p">适合什么样人群学习？</p>
        </div>
        <div class="crowd">
            <div>
                <p  class="crowd-li">
                    <img src="../../img/组10.png" alt="">
                </p>
                <p class="crowd-span">
                    <span>初中生16岁+</span>
                </p>
            </div>
            <div>
                <p  class="crowd-li">
                    <img src="../../img/组11.png" alt="">
                </p>
                <p class="crowd-span">
                    <span>高中生18岁+</span>
                </p>
            </div>
            <div>
                 <p  class="crowd-li">
                    <img src="../../img/大学生.png" alt="">
                </p>
                <p class="crowd-span">
                    <span >大学生</span>
                </p>
            </div>
            <div>
                 <p  class="crowd-li">
                    <img src="../../img/退伍军人.png" alt="">
                </p>
                <p class="crowd-span">
                    <span>退伍军人</span>
                </p>
            </div>
        </div>
        <div class="ljrx">
            <p class="ljrx-q">了解入学详情</p>
        </div>
        <div class="home-school">
            <p class="home-school-tit">校园占地2000亩，设施齐全</p>
            <p class="home-school-title"> 在空气清新，环境优美的环境里学习 </p>
        </div>
        <div class="home-school-btm">
            <div class="home-school-left">
                <img src="../../img/图层723.jpg" style="width: 470px; height: 392px;">
            </div>
            <ul class="home-school-right">
                <li class="right-i"><img src="../../img/kz.jpg" style="width: 230px; height: 190px;"></li>
                <li class="right-i"><img src="../../img/图层542.jpg" style="width: 230px; height: 190px;"></li>
                <li class="right-i"><img src="../../img/图层725.jpg" style="width: 230px; height: 190px;"></li>
                <li class="right-i"><img src="../../img/图层726.jpg" style="width: 230px; height: 190px;"></li>
                <li class="right-i"><img src="../../img/图层1001010.jpg" style="width: 230px; height: 190px;"></li>
                <li class="right-i"><img src="../../img/图层724.jpg" style="width: 230px; height: 190px;"></li>
            </ul>
        </div>
        <div class="team">
            <p class="team-tit">大华教育教师精英团队</p>
            <p class="team-title">不跟风，不吹嘘，对学生负责到底</p>
        </div>
        <Teacher></Teacher>
        <!-- <div class="contanier">
            <ul class="title">
                <li v-for="(item) in list" :key="item.id" @click="activeIndex=item.id" :class="{active:activeIndex==item.id}">
                     {{item.navs}}
                    <div @click="activeIndex=item.id" :class="{line:activeIndex==item.id}"><b></b></div>
                </li>
            </ul>
            <div class="java-main" style="height:36px;"></div>
            <div class="con-warp">
                <div class="con" >
                    <div class="con-list">
                         <swiper ref="mySwiper" :options="swiperOptions" class="con-wier">
                            <swiper-slide style="height:350px" v-for="(item) in newData" :key="item.name" class="con-slide">
                                <img :src="'https://itdahua.com'+item.image" alt="" style="width:250px;">
                                    <div class="jajie">
                                        <div class="top">
                                            <div class="top-t">
                                                <span class="name">{{item.name}}</span>
                                                <span class="experience">{{item.year}}年工作经验</span>
                                            </div>
                                            <div class="top-p">
                                                <span v-for=" item in newDate " :key="item.id">{{item.name}}</span>
                                            </div>
                                        </div>
                                        <p class="introduce">{{item.introduce}}</p>
                                    </div>
                            </swiper-slide>
                        </swiper>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>   
        </div> -->
        <div class="warp-con">
            <div class="warp-top">
                <div class="warp-tit">
                    <p class="warp-title">学员作品</p>
                    <p class="warp-introduce">紧跟时代潮流，构造高质量作品</p>
                </div>
                <div class="warp-btm">
                    <div class="warp-wop">
                        <swiper ref="mySwiper" :options="swiperOptions2" style="height: 666px;" class="warp-awp">
                        <swiper-slide class="swp-sld" style="width: 1200px;">
                            <img src="../../img/ui-rlwb.png" alt="">
                        </swiper-slide>
                         <swiper-slide class="swp-sld" style="width: 1200px;">
                            <img src="../../img/ui-rlwb.png" alt="">
                        </swiper-slide>
                         <swiper-slide class="swp-sld" style="width: 1200px;">
                            <img src="../../img/ui-rlwb.png" alt="">
                        </swiper-slide>
                         <swiper-slide class="swp-sld" style="width: 1200px;">
                            <img src="../../img/ui-rlwb.png" alt="">
                        </swiper-slide>
                         <swiper-slide class="swp-sld" style="width: 1200px;">
                            <img src="../../img/ui-rlwb.png" alt="">
                        </swiper-slide>
                    </swiper>
                        <div class="swiper-pagination1 swp-pat" ></div>
                    </div>
                    
                </div>
            </div>
        </div>
        <Student/>
        <div class="home-news-wrap">
            <div class="home-news-con">
                <div class="home-tit">
                    <p class="home-tit-top">10年大华不忘初心，一路前行</p>
                    <p class="home-tit-introduce"> 一代代大华人共同孕育的这片土地，孕育了一批又一批的精英人才 </p>
                </div>
                <ul class="home-news-con" style="height: 274px; overflow: hidden;">
                    <li class="home-li">
                        <p><img src="../../img/锦鲤.jpg" alt="" style="width: 103px; height: 103px;"></p>
                        <div>
                            <p class="home-news-con-tit">大华教育祝天下学子金榜题名!</p>
                            <p class="home-news-con-con"></p>
                            <p class="home-news-con-date"><img src="../../img/时针.png" alt=""><span> 2021.06.02</span></p>
                        </div>
                    </li>
                     <li class="home-li">
                        <p><img src="../../img/bjdh.jpg" alt="" style="width: 103px; height: 103px;"></p>
                        <div>
                            <p class="home-news-con-tit">大华教育开启豫鄂市场精英培训暨夏季启动大会，为全国学子高薪就业保驾护航！!</p>
                            <p class="home-news-con-con"></p>
                            <p class="home-news-con-date"><img src="../../img/时针.png" alt=""><span> 2021.06.02</span></p>
                        </div>
                    </li>
                     <li class="home-li">
                        <p><img src="../../img/caoc.jpg" alt="" style="width: 103px; height: 103px;"></p>
                        <div>
                            <p class="home-news-con-tit">每一滴汗水，都是看得见的精彩</p>
                            <p class="home-news-con-con"></p>
                            <p class="home-news-con-date"><img src="../../img/时针.png" alt=""><span> 2021.06.02</span></p>
                        </div>
                    </li>
                     <li class="home-li">
                        <p><img src="../../img/shanl.jpg" alt="" style="width: 103px; height: 103px;"></p>
                        <div>
                            <p class="home-news-con-tit">大华教育学员参加庆祝建党100周年大型题材影视《红色文化闪亮的坐标》节目录制!</p>
                            <p class="home-news-con-con"></p>
                            <p class="home-news-con-date"><img src="../../img/时针.png" alt=""><span> 2021.06.02</span></p>
                        </div>
                    </li>
                     <li class="home-li">
                        <p><img src="../../img/xuex.jpg" alt="" style="width: 103px; height: 103px;"></p>
                        <div>
                            <p class="home-news-con-tit">北京大华教育2021年高薪就业招生简章!</p>
                            <p class="home-news-con-con"></p>
                            <p class="home-news-con-date"><img src="../../img/时针.png" alt=""><span> 2021.06.02</span></p>
                        </div>
                    </li>
                     <li class="home-li">
                        <p><img src="../../img/zap.png" alt="" style="width: 103px; height: 103px;"></p>
                        <div>
                            <p class="home-news-con-tit">大华教育召开主题班会，向全校学员普及预防电信诈骗相关知识!</p>
                            <p class="home-news-con-con"></p>
                            <p class="home-news-con-date"><img src="../../img/时针.png" alt=""><span> 2021.06.02</span></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="home-cooperate-wrap">
            <div class="home-cooperate-con">
                <div class="home-cooperate-tit">
                    <p class="home-tit-top">企业合作</p>
                    <p class="home-tit-introduce">大华教育毕业学员服务众多一线企业</p>
                </div>
                <div class="home-cooperate-btm">
                    <img src="../../img/guang.jpg" alt="">
                </div>
            </div>
        </div>
        <Footer/>
        <Balloon/>
    </div>
    
</template>
<script>
import 'swiper/swiper-bundle.css'
import Student from '@/components/student/Student.vue'
import Footer from '@/components/footer/Footer.vue'
import Teacher from "@/components/teacher/teacher.vue"
import Balloon from '@/components/balloon/Balloon.vue'
import {getList} from '../../http/api'
import { Navigation,Pagination } from "swiper";
import { Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
  export default {
    data(){
      return {
          activeIndex:7,
          nub:0,
          list:[],
          data:[], 
          date:[
              {
                  name:'H5高级讲师',
                  cid:7
              },
              {
                  name:'Python高级讲师',
                  cid:10
              },
              {
                  name:'UI高级讲师',
                  cid:9
              },
              {
                  name:'JAVA高级讲师',
                  cid:8
              },
          ],
        //   swiperOptions: {
        //        slidesPerView: 4,
        //        spaceBetween: 30,
        //        modules:[Navigation],
        //         navigation: {
        //             nextEl: ".swiper-button-next",
        //             prevEl: ".swiper-button-prev",
        //             },
        //     pagination: {
        //         el: '.swiper-pagination',
        //         clickable: true,
        //     },
        // },
        swiperOptions1:{
            pagination: {
            el: '.swiper-pagination'
          },
        },
        swiperOptions2:{
            modules: [Pagination],
                pagination: {
                el: ".swiper-pagination1",
                clickable: true,
                },
        }
      }
    },
    components: {
        Swiper,
        SwiperSlide,
        Student,
        Footer,
        Teacher,
        Balloon

    },
    directives: {
        swiper: directive
    },
     computed: {
      swiper() {
            return this.$refs.mySwiper.$swiper
            },  
        // swiper1() {
        //     return this.$refs.mySwiper1.$swiper
        // //     },  
        //    newData(){
        //        let arr=[]
        //        arr=this.data.filter(item=>item.cid == this.activeIndex)
        //        return arr
        //    },
        //    newDate(){
        //        let err=[]
        //        err=this.date.filter(item=>item.cid == this.activeIndex)
        //        return err
        //    }

        },
    methods:{
         async getListFn(){
            let res=await getList('curricala')
            console.log("*****",res)
            this.list=res;
        },
        async getListly(){
            let res=await getList('teacher')
            console.log("kkkk",res)
            this.data=res;
        },
    },
   
    created(){
       this.getListFn();
       this.getListly();

    },
    mounted() {
    this.swiper.slideTo(3, 1000, false)
    }
  }
</script>
<style lang="scss" scoped>
.home{
    width: 100%;
    min-width: 1200px;
}
.advert{
    cursor: pointer;
    width: 100%;
    height: 475px;
    min-width: 1200px;
    overflow: hidden;
    .home-banner-wrap{
        width: 100%;
        height: 477px;
        position: relative;
        margin: 0 auto;
        min-width: 1200px;
        .home-banner{
            width: 1920px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -960px;
        }
    }
}
.swiper-container{
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        .swiper-wrapper{
            margin: 0 auto;
            .swiper-slide{
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            transition-property: transform;
            box-sizing: content-box;
            img{
                width: 100%;
                height: 100%;
            }
            }
        }
    }
.home-warp{
    background-color: #f2f2f2;
    width: 100%;
}
.home-introduce-con{
    margin: -50px auto 0;
    position: relative;
    z-index: 100;
    width: 1118px;
}
.home-introduce{
    cursor: pointer;
    background-color: #fff;
    display: flex;
    padding: 10px 15px;
}
.imges{
    padding: 0px 5px;
}
.home-trait-wrap{
    width: 100%;
    background-color: #f2f2f2;
    height: 147px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .home-trait-con{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
         .gnen{
            width: 300px;
            padding: 0 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            position: relative;
            .mish{
                color: #666;
                font-size: 24px;
                margin-top: 20px;
                margin-bottom: 12px;
                .mish-i{
                    font-size: 14px;
                    color: #999;
                }
            }
            .mish-p{
                font-size: 14px;
                color: #999;
                margin: 14px;
            }
            .mish-f{
                border-left: 1px solid #fff;
                border-right: 1px solid #ccc;
                height: 65px;
                position: absolute;
                right: 0;
                top: 42px;
            }
        }
    }
}
.scene{
    padding-top: 47px;
    .scene-p{
        width: 356px;
        height: 65px;
        margin: 0 auto;
        background-color: #39f;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        line-height: 65px;
        border: 2px solid #1f8ceb;
        border-radius: 50px;
    }
}
.crowd{
    width: 1200px;
    margin: 0 auto;
    padding-top: 46px;
    display: flex;
    justify-content: space-between;
    .crowd-span{
        font-size: 22px;
        font-weight: 700;
        color: #3cf;
        text-align: center;
        padding-top: 10px;
    }
}
.ljrx{
    padding-top: 47px;
    .ljrx-q{
        margin: 0 auto;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        box-sizing: border-box;
        font-size: 22px;
        color: #1f8ceb;
        border: 2px solid #1f8ceb;
        border-radius: 50px;
    }
}
.home-school{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-top: 60px;
    user-select: none;
    .home-school-tit{
        font-size: 34px;
        color: #333;
    }
    .home-school-title{
        padding-top: 18px;
        font-size: 18px;
        color: #999;
        padding-bottom: 52px;
    }
}
.home-school-btm{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .home-school-left{
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    .home-school-right{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-left: 14px;
        .home-school-right .right-i{
            width: 230px;
            height: 190px;
            margin-bottom: 8px;
        }
    }
}
.team{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-top: 60px;
    user-select: none;
    .team-tit{
        font-size: 34px;
        color: #333;
    }
    .team-title{
        padding-top: 18px;
        font-size: 18px;
        color: #999;
        padding-bottom: 52px;
    }
}
// .contanier{
//     width: 100%;
//     .title{
//         width: 1040px;
//         height: 33px;
//         margin: 0 auto;
//         border-bottom: 1px solid #cfcfcf;
//          li{
//             cursor: pointer;
//             width: 130px;
//             height: 26px;
//             float: left;
//             margin-left: 40px;
//             font-size: 16px;
//             counter-reset: #333;
//             text-align: center;
//             position: relative;
//             .line{
//                 width: 100%;
//                 height: 7px;
//                 background: #0cf;
//                 position: absolute;
//                 left: 0;
//                 bottom: -14px;
//                 b{
//                     content: "";
//                     border: 5px solid #0cf;
//                     border-bottom-color: transparent;
//                     border-left-color: transparent;
//                     border-right-color: transparent;
//                     position: absolute;
//                     bottom: -10px;
//                     left: 50%;
//                     transform: translateX(-50%);
//                 }
//             }
//         }
//          .active{
//                 height: 26px;
//                 line-height: 26px;
//                 background: #0cf;
//                 position: relative;
//                 text-align: center;
//                 font-size: 16px;
//                 color: #fff;
//                 border-radius: 15px;
//             }
//     }
//     .con-warp{
//     width: 1200px;
//     height: 350px;
//     margin: 0 auto;
//     .con{
//         width: 100%;
//         height: 100%;
//         position: relative;
//         .con-list{
//             width: 1040px;
//             height: 350px;
//             margin: 0 auto;
//             .con-wier{
//                 position: relative;
//                 width: 100%;
//                 height: 100%;
//                 z-index: 1;
//                 display: flex;
//                 transition-property: transform;
//                 box-sizing: content-box;
//                 .con-slide{
//                     height: 350px;
//                     position: relative;
//                     // background-color: yellow;
//                     .jajie{
//                        width: 250px;
//                         background: rgba(0,0,0,.5);
//                         position: absolute;
//                         left: 0;
//                         bottom: 0; 
//                         .top{
//                             width: 208px;
//                             height: 70px;
//                             color: #fff;
//                             margin: 0 auto;
//                             .top-t{
//                                 margin-top: 16px;
//                                 margin-bottom: 11px;
//                             }
//                             .top-p{
//                                 font-size: 20px;
//                             }
//                         }
//                         .introduce{
//                             width: 208px;
//                             height: 0;
//                             margin: 0 auto;
//                             border-top: 0 solid #fff;
//                             font-size: 12px;
//                             color: #fff;
//                             font-family: SimSun;
//                             text-indent: 23px;
//                             letter-spacing: 1px;
//                             line-height: 15px;
//                             box-sizing: border-box;
//                         }
//                     }
//                     .jajie:hover{
//                         animation:scaleDrow 1s linear ;
//                         height: 250px;
//                         @keyframes scaleDrow{
//                             0%{
//                                 height: 76px;
//                             }
//                             100%{
//                                 height: 250px;
//                             }
//                         }
//                     }
//                 }
//             }
//         }
//          .swiper-button-prev{
//                left: 0;
//                 width: 64px;
//                 height: 64px;
//                 border-radius: 50%;
//                 background-color: #666;
//                 color: #fff;
//                 text-align: center;
//                 outline: none;
//             }
//             .swiper-button-next{
//                 right: 0;
//                 width: 64px;
//                 height: 64px;
//                 border-radius: 50%;
//                 color: #fff;
//                 background-color: #666;
//                 text-align: center;
//                 outline: none;
//             }
//     }
// }
// }
.warp-con{
    .warp-top{
        width: 1200px;
        margin: 0 auto;
        .warp-tit{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding-top: 60px; 
            user-select: none;
            .warp-title{
                font-size: 34px;
                color: #333;
            }
            .warp-introduce{
                padding-top: 18px;
                font-size: 18px;
                color: #999;
                padding-bottom: 52px;
            }
        }
        .warp-btm{
            height: 666px;
            .warp-wop{
                //  height: 666px;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                overflow: hidden;
                list-style: none;
                padding: 0;
                z-index: 1;
                .warp-awp{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    display: flex;
                    transition-property: transform;
                    box-sizing: content-box;
                    .swp-sld{
                        flex-shrink: 0;
                        width: 100%;
                        height: 100%;
                        position: relative;
                        transition-property: transform;
                        img{
                            width: 1200px;
                            height: 576px;
                        }
                    }
                }
                 .swp-pat{
                        position: absolute;
                        text-align: center;
                        transition: opacity .3s;
                        transform: translateZ(0);
                        z-index: 10;
                         
                      
                }
            }
        }
    }
}
.home-news-wrap{
    width: 100%;
    .home-news-con{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        .home-tit{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding-top: 60px;
            user-select: none;
            .home-tit-top{
                font-size: 34px;
                color: #333;
            }
            .home-tit-introduce{
                padding-top: 18px;
                font-size: 18px;
                color: #999;
                padding-bottom: 52px;
            }
        }
        .home-news-con{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
             .home-li{
                    width: 400px;
                    box-sizing: border-box;
                    display: flex;
                    padding: 16px 0;
                    cursor: pointer;
                    .home-news-con-con{
                        margin-top: 20px;
                    }
                    .home-news-con-date{
                        font-size: 12px;
                        color: #ccc;
                        height: 17px;
                        line-height: 17px;
                    }
            }
        }
    }
}
.home-cooperate-wrap{
    padding-bottom: 88px;
    .home-cooperate-con{
        width: 1200px;
        margin: 0 auto;
        .home-cooperate-tit{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding-top: 60px;
            user-select: none;
            .home-tit-top{
                font-size: 34px;
                color: #333;
            }
            .home-tit-introduce{
                padding-top: 18px;
                font-size: 18px;
                color: #999;
                padding-bottom: 52px;
            }
        }
    }
}
.warp-wop ::v-deep .swiper-pagination-bullet{
                                width: 28px; 
                                height: 16px;
                                border-radius: 16px;
                                background-color: #ccc;
                                opacity: 1;
                        }
 .warp-wop ::v-deep .swiper-pagination-bullet-active{
                            width: 68px;
                            height: 16px;
                            border-radius: 16px;
                            background-color: #f90;
                            opacity: 1;
                        }

</style>